
<template>
  <div>
    <!-- 头部 -->
    <hm-header>我的跟帖</hm-header>
    <!-- 列表 -->
    <!-- 

      List 组件通过 loading 和 finished 两个变量控制加载状态，
      当组件滚动到底部时，会触发 load 事件并将 loading 设置成 true
      此时可以发起异步操作并更新数据，
      数据更新完毕后，将 loading 设置成 false 即可。
      若数据已全部加载完毕，则直接将 finished 设置成 true 即可。

      1. 知道即可 loading 和 finished
      2. @load='onLoad'   log('触底了')
      3. immediate-check - 是否立即检测  false
      4. loading 加载状态 false , 控制加载状态
         ==> true,  正在加载中,不能触发 load 事件
         ==> false  加载完成, 会触发 load 事件 
      5. 触发 load 事件,  默认设置 loading =ture 可以查看调试器 , 为true 不会再触发
      6. pageIndex = 1,  this.pageIndex ++, this.getCommentsList() => 加载数据
      7. this.loading =  false
      8. if(res.data.data.length < 5) {  this.finished = true }

     -->
    <van-list :finished='finished' v-model='loading' class="list" @load='onLoad' :immediate-check='false'>
      <div class="item" v-for='item in comments' :key='item.id'>
        <!-- 1. 时间 -->
        <div class="time">{{ item.create_date | date('YYYY-MM-DD hh:mm') }}</div>
        <!-- 2.1 父评论的内容 -->
        <div class="parent-comment" v-if='item.parent'>
          <div class="parent-name">回复: {{ item.parent.user.nickname }}</div>
          <div class="parent-content">{{ item.parent.content }}</div>
        </div>
        <!-- 2.2 内容 -->
        <div class="content">{{ item.content }}</div>
        <!-- 3. 链接 -->
        <div class="link">
          <div class="title line1">{{ item.post.title }}</div>
          <i class="iconfont iconjiantou1"></i>
        </div>
      </div>
    </van-list>
  </div>
</template>

<script>
export default {
  data(){
    return {
      comments : [], // 评论列表
      loading : false,  // 用于指定加载状态(控制是否再次加载触底的load事件)   
      // true  => 正在加载中 不会触发load事件
      // false => 才会触发load事件
      pageIndex : 1,
      finished : false
    }
  },

  created(){
   this.getCommentsList()
  },
  methods : {
    getCommentsList(){
    this.$axios.get('/user_comments',{
          params : {
            pageIndex : this.pageIndex,
            pageSize : 5
          }
        }).then(res => {
          console.log('跟帖',res.data);
          // this.comments =  res.data.data
          this.comments =  [...this.comments,...res.data.data]

          this.loading = false

          if (res.data.data.length < 5) {
            this.finished = true
          }

        })
    },
    // 加载更多数据
    onLoad(){
      console.log('加载了');
      // loading : true
      this.pageIndex ++ 
      this.getCommentsList()
    }
  }

}
</script>

<style scoped lang='less'>

.item {
  border-bottom: 1px solid #ccc;
  padding: 10px;
  .time {
    font-size: 14px;
    color: #999;
    height: 30px;
    line-height: 30px;
  }
  .parent-comment {
    padding: 10px;
    background: #eee;
    color: #666;
    line-height: 20px;
    .parent-name {
      height: 25px;
      line-height: 25px;
    }
  }
  .content {
    font-size: 14px;
    padding: 10px 0
  }

  .link {
    color: #999;
    display: flex;
    .title {
      flex: 1;
      // font-size: 14px;
    }
    i {
      width: 30px;
      text-align: right;
    }
  }

}


</style>